/* eslint-disable node/no-deprecated-api */
<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="header_left">
        <div class="header_img" :style="isCollapse? 'width:60px': 'width:200px'">
          <img src="../assets/logo_login.png" alt="" width="200">
        </div>
        <!-- <span>电商后台管理系统</span> -->
        <div class="header_switch" @click="toggleCollapse">
          <i :class="isclass"></i>
        </div>
        <div>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :default-active="menuindex"
            background-color="#263238"
            text-color="#fff"
            @select="onselectMenu"
            active-text-color="#409eff"
          >
            <el-menu-item
              :index="item.id+''"
              v-for="(item,index) in headerList "
              :key="index"
            >{{item.title}}</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="userInfo">
        <img src="../assets/headimg.png" alt="">
        <div class="u_box">
          <span class="user">
            <i>{{userName}}</i>, 您好!
          </span>
          <span class="user_landtime">{{nowTime}}</span>
        </div>
        <ScreenFull :width="50" :height="50" :fill="'#FFFFFF'"/>
        <el-button type="info" @click="logout" v-no-click>退出</el-button>
      </div>
    </el-header>
    <!-- 主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px':'200px'">
        <!-- <div class="toggle-button">|||</div> -->
        <!-- 侧边栏菜单区 -->
        <el-menu
          background-color="#263238"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          @select="onselectMenus"
          router
          :default-active="activePath"
          ref="menus"
        >
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{item.title}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/'+subItem.path"
              v-for="subItem in item.submenu"
              :key="subItem.id"
              @click="saveNavState('/'+subItem.path)"
            >
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
          <happy-scroll color="rgba(0,0,0,0.5)" size="10" resize hide-horizontal>
            <div style="width:100% ">
              <tabviews @onclose="onclose" @onhome="onhome"></tabviews>
              <transition name="fade" mode="out-in">
                    <router-view></router-view>
              </transition>
            </div>
          </happy-scroll>
      </el-main>
      <!-- <el-footer>©Copyright 西安卓越网络科技有限公司 (www.cnzhuoyue.cn) 版权所有</el-footer> -->
    </el-container>
    <el-footer :class="isCollapse?'footML64':'footML200'">
      ©Copyright 科豹软件（www.keopard.com） 版权所有
      <span :class="isCollapse?'footML64':'footML200'"></span>
    </el-footer>
  </el-container>
</template>

<script>
import ScreenFull from './screenfull/index'
import tabviews from '@/views/components/home/tabview/tabview'
// eslint-disable-next-line no-unused-vars
import { mapState, mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
// import { log } from 'util'
export default {
  components: {
    ScreenFull,
    tabviews
  },
  data () {
    return {
      headerList: [],
      menuindex: sessionStorage.getItem('menuindex') || '1',
      // 左侧菜单数据
      menulist: [],
      isclass: 'el-icon-s-fold',
      // menulist: ,
      iconsObj: {
        1: 'el-icon-setting',
        11: 'el-icon-s-goods',
        19: 'el-icon-s-order',
        22: 'el-icon-s-data',
        29: 'el-icon-s-operation',
        35: 'el-icon-s-platform',
        41: 'el-icon-s-open',
        44: 'el-icon-user-solid',
        46: 'el-icon-s-home',
        55: 'el-icon-s-claim',
        61: 'el-icon-bank-card',
        71: 'el-icon-s-data',
        79: 'el-icon-s-unfold',
        74: 'el-icon-s-flag'
      },
      // 是否折叠
      isCollapse: false,
      // 被激活的链接地址
      activePath: '',
      userName: '',
      nowTime: ''
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
    this.userName = window.sessionStorage.getItem('username')
    // this.nowTime = this.getNowDate(new Date());
    this.getmenu()
    setInterval(() => {
      this.nowTime = this.getNowDate(new Date())
    }, 1000)
  },
  methods: {
    ...mapMutations(['getTabIndex', 'getauthcurent', 'gettabview']),
    logout () {
      this.$confirm('确定退出智鲜后台管理系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          window.sessionStorage.clear()
          this.$router.push('/login')
        })
        .catch(() => {
          return false
        })
    },
    // 获取所有的菜单
    async getMenuList () {
      // 因为get获取到的是一个Promise对象,为了简化操作可以用async和await
      // console.log('sadfasd')
      const { data: res } = await this.$http.get('mapi/index/column')
      // console.log(res)
      if (res.status !== 1) return this.$message.error(res.msg)
      this.menulist = res.data
      this.getauthcurent(res.data)
    },
    // 点击按钮切换菜单的折叠与展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.isclass = 'el-icon-s-unfold'
      } else {
        this.isclass = 'el-icon-s-fold'
      }
      // el-icon-s-unfold
    },
    //  保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    getNowDate (date) {
      return (
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1) +
        '月' +
        date.getDate() +
        '日 ' +
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
        ':' +
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':' +
        (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      )
    },
    // 获取导航栏菜单
    getmenu () {
      this.$api
        .getmenu({})
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code == 200) {
            this.headerList = res.data.data
            // 防止页面刷新页面上导航栏数据丢失
            if (sessionStorage.getItem('menuindex')) {
              this.onselectMenu(sessionStorage.getItem('menuindex'))
            } else {
              this.getMenuList()
            }
          }
        })
        .catch(res => {})
    },
    // 点击头部menu发送请求更改左侧菜单栏
    onselectMenu (e) {
      this.getTabIndex(e)
      this.menuindex = e
      sessionStorage.setItem('menuindex', e)
      const index = this.headerList.find(x => {
        // eslint-disable-next-line eqeqeq
        return x.id == e
      })
      this.$api
        .getmenuaside({
          params: {
            id: index.id
          }
        })
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code == 200) {
            this.menulist = res.data.data
            this.getauthcurent(res.data.data)
          }
        })
        .catch(res => {
          console.log(res)
        })
    },
    // 点击把当前导航栏menu索引传到vuex
    onselectMenus (e) {
      this.gettabview(e)
    },
    // 点击标签页跳转路由页面
    onclose (e) {
      // console.log(e);
      e = '/' + e
      this.activePath = e
    },
    // 打开home配置项
    onhome () {
      this.activePath = '/home'
      this.menuindex = '1'
      this.onselectMenu('1')
      this.$router.push('/home').catch(res => {})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../assets/css/font_1776542_oqnmvpe88k/iconfont.css";
.home-container {
  height: 100%;
  // transition: all .8s;
  // &:hover{
  //   transform: rotate(720deg)
  // }
}
.el-header {
  background-color: #263238;
  display: flex;
  justify-content: space-between;
  padding: 0 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  .header_left {
    display: flex;
    .header_img {
      width: 200px;
      height: 60px;
      img {
        width: 200px;
        height: 100%;
      }
    }
  }
  .header_switch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    background: #263238;
    cursor: pointer;
    height: 60px;
    // i{
    //   transition: all .6s;
    // }
    //   i:hover{
    //     transform:scale(2);
    //   }
  }
  > div.userInfo {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      vertical-align: middle;
      margin-right: 15px;
    }
    .u_box {
      display: flex;
      flex-direction: column;
      span {
        margin-right: 20px;
        font-size: 14px;
        i {
          font-size: 16px;
          font-style: normal;
        }
      }
      span.user_landtime {
        font-size: 12px;
      }
    }
  }
}
.el-container {
  height: 100%;
  overflow: hidden;
}
.el-aside {
  background-color: #263238;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.4s;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-menu {
    border-right: none;
  }
}
.el-main {
  position: relative;
  margin-bottom: 30px;
   background-color: #EAEDF1;
  /deep/ .happy-scroll-container{
    width: 100% !important;
  }
  /deep/ .happy-scroll-content{
       width: 100% !important;
  }
}
.toggle-button {
  background-color: #263238;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(-100px);
}
.fade-leave-to{
   opacity: 0;
  transform: translateX(100px);
}
.el-footer {
  height: 30px !important;
  width: 100%;
  transition: all 0.4s;
  text-align: center;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  line-height: 30px;
  background: #fff;
  margin-left: 200px;
}
.footML64 {
  margin-left: 64px;
}
.footML200 {
  margin-left: 200px;
}
</style>
